<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>


<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>绿地中央广场综合物业办公系统 - 基础表格</title>
    <meta name="keywords" content="综合办公系统">
    <meta name="description" content="综合办公系统">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css" />

</head>

<body class="gray-bg">
<div class="wrapper2 wrapper-content2 animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-3 col-sm-offset-2 text-right">
                    <h3><small>搜索条件:</small></h3>
                </div>
                <div class="col-sm-2">
                    <select class="selectpicker form-control">
                        <option value="0">选择类型</option>
                        <option value="1">项目名称</option>
                        <option value="2">项目经理</option>
                    </select>
                </div>

                <div class="col-sm-3">
                    <div class="input-group">
                        <input type="text" placeholder="请输入关键词" class="input-sm form-control">
                        <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-search"></i>搜索</button>
                                    </span>
                    </div>
                </div>
                <div class="col-sm-2 text-right">
                    <a href="save-employee.jsp" class="btn btn-sm btn-primary" type="button"><i class="fa fa-plus-circle"></i> 添加员工</a>
                </div>
            </div>

            <div class="table-responsive">
                <table id="empTable" lay-filter="test"></table>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="editEmployee">编辑</button>
                        <button class="layui-btn layui-btn-sm" lay-event="deleteEmployee">删除</button>
                    </div>
                </script>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/select/bootstrap-select.min.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="layui/layui.js"></script>

<script>
    $(document).ready(function() {
        // 设置按钮的样式
        $('.selectpicker').selectpicker('setStyle', 'btn-white').selectpicker('setStyle', 'btn-sm');

        //点击删除
        $('.btndel').click(function () {
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {//此函数是点击删除执行的函数
                //这里写ajax代码
                // 以下是成功的提示框，请在ajax回调函数中执行
                swal("删除成功！", "您已经永久删除了这条信息。", "success");
            });
        });
        //加载列表
        loadEmployeeList();

    });
    function loadEmployeeList(){
        layui.use('table',function(){
            var table = layui.table;
            table.render({
                elem: '#empTable'
                //,height: 400
                ,url: '${pageContext.request.contextPath}/emp/getEmployeesInfo' //数据接口
                //,toolbar: 'default'
                ,toolbar:"#toolbarDemo"
                ,page: true //开启分页
                ,limits:[5,10,15,20]
                ,cols: [[
                    {type:'checkbox',fixed: 'left'},
                    {field:"eid",title: '编号', width:80, sort: true, fixed: 'left'},
                    {field:"ename",title: '姓名', width:100,fixed: 'left'},
                    {field:"esex",title: '性别', width:80},
                    {field:"eage",title: '年龄', width:80},
                    {field:"telephone",title: '电话', width:120},
                    {field:"hiredate",title: '入职日期', width:120,templet:function(data){
                            var date=new Date(data.hiredate);
                            return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();

                        }},
                    {field:"pnum",title: '身份证号', width:120},
                    {field:"username",title: '用户名', width:120},
                    {field:"roleName",title: '角色名称', width:120},
                    {field:"deptName",title: '部门名称', width:120},
                    {field:"remark",title: '备注', width:120}
                ]]
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'editEmployee':
                        var data = checkStatus.data;
                        // alert(JSON.stringify(data));
                        if(data.length!=1){
                            swal("只能选择一条记录进行修改");
                        }else{
                            window.location="${pageContext.request.contextPath}/pages/update-employee.jsp?eid="+data[0].eid;
                        }
                        break;
                    case 'deleteEmployee':
                        var data = checkStatus.data;
                        var eids=new Array();
                        if(data.length==0){
                            swal("至少选择一条记录进行删除");
                            return ;
                        }else{
                            for(var i=0;i<data.length;i++){
                                eids.push(data[i].eid);
                            }
                        }
                        swal({
                            title: "您确定要删除这条信息吗",
                            text: "删除后将无法恢复，请谨慎操作！",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "删除",
                            closeOnConfirm: false
                        }, function () {//此函数是点击删除执行的函数
                            $.ajax({
                                url:"${pageContext.request.contextPath}/emp/deleteEmployeeByEids",
                                type:"post",
                                data:{"eids":eids},
                                dataType:"json",
                                cache:false,
                                success:function(rs){
                                    if(rs.status==200){
                                        swal("删除成功！", "您已经永久删除了这条信息。", "success");
                                        loadEmployeeList();
                                    }else if(rs.status==400){
                                        swal(rs.msg);
                                    }
                                }
                            });

                        });
                        break;
                };
            });
        });
    }
</script>

</body>


</html>
    